<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText" @tap="onreturn()">返回</block>
			<block slot="content">工单查询</block>
			 
		</cu-custom>

		<scroll-view scroll-x class="bg-white nav text-center fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in devtypelist" :key="index"
			 @tap="tabSelect" :data-id="index">
				<block>
					<text :class="devtypelist[index].icon" type="default"></text>
					<text style="padding-left: 5px;" type="default">
					{{devtypelist[index].title}}</text>
				</block>

			</view>

		</scroll-view>
		<scroll-view scroll-y :style="[{top:CustomBar+300 + 'px'}]">
			<view class="cu-list menu-avatar" style="margin-top: 120upx;">
				<block v-if="TabCur==0">
				<view class="cu-item" style="height: 200upx;" v-for="(item,i) in listcontents_before" 
				:key="i" @tap="toPage('../work/orderedit?id='+item.id)">
					<view class="content" style="left: 30upx;">
						 <template>
						 	<view>
						 		<view class="text-grey">[户主-{{item.name}}]&emsp;{{item.addr}}</view>
						 	</view>
						 	<view>
						 		<icon class="cuIcon-infofill text-red "></icon>【故障描述】{{item.content.substr(0, 20)}}
						 		<text v-if="item.content !== null && item.content.length > 20">
						 			...
						 		</text>
						 		<text v-if="item.content !== null && item.content.length > 20" class="full_text line-pink text-bold"
						 		 @click="toggleDescription(item.content)">查看全文</text>
						 
						 	</view>
						 	<view class="text-grey">{{item.cdate}}</view> 
						 </template>
					</view>
					<view class="action">
						<!-- <view class="text-grey text-sm">2019-12-12 12:00</view> -->
						<view class="cu-tag round sm bg-red" >待维修</view>
					</view>
				</view>
			    </block> 
				
				<block v-if="TabCur==1">
				<view class="cu-item" style="height: 200upx;" v-for="(item,i) in listcontents_after" :key="i" @tap="toPage('../work/orderdetail?id='+item.id)">
					<view class="content" style="left: 30upx;"> 
						<template>
							<view>
								<view class="text-grey">[户主-{{item.name}}]&emsp;{{item.addr}}</view>
							</view>
							<view>
								<icon class="cuIcon-infofill text-red "></icon>【故障描述】{{item.content.substr(0, 20)}}
							 
							</view>
							<view class="text-grey">{{item.cdate}}</view> 
						</template>
					</view>
					<view class="action">
						<!-- <view class="text-grey text-sm">2019-12-12 12:00</view> -->
						<view class="cu-tag round sm bg-green"  >已维修
						<!-- {{devtypelist[TabCur].title}} --></view>
					</view>
				</view>
				</block>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				pid: 0,
				username:'',
				listcontents_before: [],
				listcontents_ing: [],
				listcontents_after: [],
				devtypelist: [{
						title: '待维修',
						icon: 'cuIcon-repair'
					},
					{
						title: '已维修',
						icon: 'cuIcon-roundcheck'
					},
				],
			}
		},onReady() {  
			this.getorderlist();
		},
		onShow() {   
			 
			uni.getStorage({
				key: 'userInfo',
				success: (res) => { 
					this.username = res.data.name; 
				},
				fail: (e) => {
					this.toLogin(); 
				}
			});  
			
			this.getorderlist();
		},
		onLoad(event) {
			this.pid = event.pid; 
			console.log('当前选项卡' + this.pid); 
			this.TabCur = this.pid;  
			uni.getStorage({
				key: 'userInfo',
				success: (res) => { 
					this.username = res.data.name; 
				},
				fail: (e) => {
					this.toLogin(); 
				}
			});  
		},
		onBackPress(options) { 
			// Android 实体返回键 (from = backbutton)
			// 顶部导航栏左边的返回按钮 (from = backbutton)
			// 返回 API，即 uni.navigateBack() (from = navigateBack)

			if (options.from === 'navigateBack') {
				return false;
			}
			this.backButton();
			return true;

		},
		methods: {
			// 全文展开收起
			toggleDescription(num) {
				//this.showText = !this.showText;
				uni.showModal({
					content: num
				})
			}, 
			toLogin() {
				uni.navigateTo({
					url: '../login/login'
				}) 
			}, 
			// 返回上一页
			onreturn() {
				uni.reLaunch({
					url: '../index/index'
				});
			},
			backButton() {
				uni.navigateBack({
					delta: 1
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60; 
				
				console.log('当前选项卡' + this.TabCur);
				
			},
			todetail() {
				uni.navigateTo({
					url: 'orderdetail'
				})
			},
			toPage(url) {
				if (!url) {
					uni.showToast({
						title: '模板未包含此页面',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: url
				})
			} 
			,
			getorderlist() {
				//维修订单集合
				var _self = this;
				
				var sqlwhere = " and wx_people='"+_self.username+"'";
				console.log("查询条件" + sqlwhere);
				
				
				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select * from c_wordorder where state=0'+sqlwhere+' order by cdate asc',
					success:(res) =>{
						_self.listcontents_before = res;
						console.log('待维修列表' + res);
					},
					fail: function(e) {
						console.log('selectSql failed: ' + JSON.stringify(e));
					}
				});
				/* plus.sqlite.selectSql({
					name: 'test',
					sql: 'select * from c_wordorder where state=1'+sqlwhere+' order by cdate asc',
					success:(res) =>{
						_self.listcontents_ing = res;
						console.log('维修进行中数量' + res);
					},
					fail: function(e) {
						console.log('selectSql failed: ' + JSON.stringify(e));
					}
				}); */
				plus.sqlite.selectSql({
					name: 'test',
					sql: 'select * from c_wordorder where state=2'+sqlwhere+' order by cdate asc',
					success:(res) =>{
						_self.listcontents_after= res;
						console.log('已维修列表' + res);
					},
					fail: function(e) {
						console.log('selectSql failed: ' + JSON.stringify(e));
					}
				});
			},
		}
	}
</script>

<style>

</style>
